<template>
	<view class="container" :style="(ispdFocus || isuserFocus)?containerHeight.focus:containerHeight.blur">
		
		<view class="input-area">
			<view class="user-icon">
				<image :src="userImg" :style="isDisabledBtn?'opacity:0.5':'opacity:1'"></image>
			</view>
			<h4>当前id：{{id}}</h4>
			<h4>昵称：{{nickname}}</h4>
			管理员登录：<switch checked @change="switch1Change" />

			<!-- 用户名输入框 -->
			<view class="input-text" :style="isuserFocus?input_boder_style.focus:input_boder_style.blur">
				<view :style="isuserFocus?label_style.focus:label_style.blur">
					帐 号
				</view>

				<u-input :focus="un" v-model="userLoginInfo.userName" type="text" :height="100" placeholder="" :custom-style="customStyle"
				 :clearable="false" @focus="userFocus" @blur="userBlur" />

				<view class="clear" @click="clearInput('userName')" v-show="userLoginInfo.userName!=='' && isuserFocus">
					<image :src="clearImg" class="img"></image>
				</view>
			</view>
			<!-- 密码输入框 -->
			<view class="input-text" :style="ispdFocus?input_boder_style.focus:input_boder_style.blur">
				<view :style="ispdFocus?label_style.focus:label_style.blur">
					密 码
				</view>

				<u-input :focus="pd" v-model="userLoginInfo.password" type="password" :password-icon="false" :height="100"
				 placeholder="" :maxlength="pdMaxLength" :custom-style="customStyle" :clearable="false" @focus="pdFocus" @blur="pdBlur" />

				<view class="clear" @click="clearInput('password')" v-show="userLoginInfo.password!=='' && ispdFocus">
					<image :src="clearImg" class="img"></image>
				</view>
			</view>

			<!-- 登录按钮 -->
			<view class="btn">
				<u-button size="default" :loading="isLogining" :ripple="true" :custom-style="isDisabledBtn?login_btn_style.disabled:login_btn_style.able"
				 :disabled="isDisabledBtn" @click="loginAll">{{isLogining?'':'登 录'}}</u-button>
			</view>
			<!-- 注册按钮 -->
			<view class="btn">
				<u-button size="default" :loading="isLogining" :ripple="true" :custom-style="isDisabledBtn?login_btn_style.disabled:login_btn_style.able"
				 :disabled="isDisabledBtn" @click="register">{{isLogining?'':'注 册'}}</u-button>
			</view>
			

			<u-toast ref="uToast"></u-toast>
		</view>
		<view class="copy-right">CopyRight 2023.07.26 gualiguali</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRoot:true,
				id:this.$store.state.id,
				// ------------- 其他 -------------
				userLoginInfo: {
					userName: '',
					password: ''
				},
				nickname:"",
				// 整体容器高度，单位 rpx

				// containerHeight: 1000,
				containerHeight: {
					focus: 'height:800rpx;transition:0.2s',
					blur: 'height:1300rpx;transition:0.2s'
				},

				// 获取焦点时，整体上移的动画效果
				animationData: {},

				// 登录界面的用户图标
				userImg: '../../static/img/user.png',

				// 是否正在清除
				isClearing: false,

				// ------------- 输入框 -------------
				pdMaxLength: 10,
				// 输入框是否获取到焦点
				isuserFocus: false,
				ispdFocus: false,

				// 输入框自定义样式
				customStyle: {
					"padding-left": "40rpx",
					// 使光标消失（iOS无效果）
					"color": "transparent",
					"text-shadow": "0 0 0 #000"
				},

				// 清除按钮图标
				clearImg: '../../static/img/clear.png',

				// 输入框 label 样式
				label_style: {
					focus: 'width:100rpx;display:flex;justify-content:center;color:#FF5242;font-weight:bold;transform:scale(1.1)',
					blur: 'width:100rpx;display:flex;justify-content:center;color:#aaaaaa;transform:scale(1)'
				},

				input_boder_style: {
					focus: 'border-bottom: 1px solid #FF5242;',
					blur: 'border-bottom: 1px solid #e4e4e4;'
				},

				// ------------- 登录按钮 -------------
				// 登录按钮自定义样式
				login_btn_style: {
					able: {
						"width": "100%",
						"height": "100rpx",
						"border-radius": "20rpx",
						"border": "#e4e4e4",
						"background-color": "#FF5242",
						"color": "#fff"
					},
					disabled: {
						"width": "100%",
						"height": "100rpx",
						"border-radius": "20rpx",
						"border": "#e4e4e4",
						"background-color": "#FF5242",
						"color": "#fff",
						"opacity": "0.5"
					}
				},

				// 点击登录按钮后，接口返回数据前，对该操作上锁
				isLogining: false,

				un: false,
				pd: false,

				isDisabledBtn: true
			}
		},
		onLoad() {
			console.log("进入登录界面")
		// uni.request({
		// 	  	method:'GET',
		// 		url:"http://127.0.0.1:4523/m1/2916839-0-default/api/user/my",
		// 	  })					  
		// 	  .then(res => {
		// 		  console.log(res);
		// 	  })
		},
		onPullDownRefresh(){
				  console.log("刷新登录页面")
					uni.request({
						  	method:'GET',
							url:"http://47.97.114.13:8080/api/user/my",
							header: {
							    "Authorization": this.$store.state.token,
							  },
						  })					  
						  .then(res => {
							  console.log(res);
							  this.$store.commit("saveLocalid",res[1].data.data.id)
							  console.log("id:"+this.$store.state.id)
							  this.id = res[1].data.data.id
							  this.$store.commit("saveavatarUrl",res[1].data.data.avatarUrl)  
							  this.userImg = res[1].data.data.avatarUrl
							  console.log("avatarUrl:"+this.$store.state.avatarUrl)
							  this.nickname = res[1].data.data.nickname
						  })
						  
						if(this.$store.state.id!=null)
						{
							console.log("跳转");
							uni.switchTab({
								url: 'pages/tabbar/tabbar-5/tabbar-5'
							});
						}

				  uni.stopPullDownRefresh()
			      },
		methods: {
        switch1Change: function (e)
			{
				if(e.detail.value === true)
				{
					this.isRoot = true
					//console.log(this.isRoot)
				}
				else{
					this.isRoot = false
					//console.log(this.isRoot)
				}
				
			},
			userFocus() {
				// 是否在焦点上
				this.isuserFocus = true
			},
			userBlur() {
				setTimeout(() => {
					this.isuserFocus = false
				}, 1)
			},

			pdFocus() {
				this.ispdFocus = true
			},
			pdBlur() {
				// 失去焦点事件先于清除事件触发，因此让其延迟即可先触发 clearInput 事件
				setTimeout(() => {
					this.ispdFocus = false
				}, 1)
			},

			// 清除 input 内容
			clearInput(value) {
				switch (value) {
					case 'userName':
						// setTimeout(() => {
							this.userLoginInfo.userName = ''
							// 清空内容之后保持焦点
							this.un = false
							this.$nextTick(() => {
								this.un = true
							})
						// }, 2)
						break
					case 'password':
						// setTimeout(() => {
							this.userLoginInfo.password = ''
							this.pd = false
							this.$nextTick(() => {
								this.pd = true
							})
						// }, 2)
						break
				}
			},
			
			getInformation(){
				uni.request({
					  	method:'GET',
						url:"http://47.97.114.13:8080/api/user/my",
					  })					  
					  .then(res => {
						  console.log(res);
					  })
			},

			loginAll(){
				if(this.isRoot === true)
				{
					this.loginRoot()
				}
				else
				{
					this.loginCommon()
				}
			},
			
			loginRoot()
			{
				//root用户登录
					uni.request({
						  	method:'POST',
							url:"http://47.97.114.13:8080/api/user/admin/token",
							data:{
								username:this.userLoginInfo.userName,
								password:this.userLoginInfo.password,
							},
						  })
						  .then(res => {
							  console.log("loginadmin");
							  //console.log(res);
							  if(res[1].data.success === true)
							  {
								  this.$store.commit("saveToken",res[1].data.data.token)
								  console.log("admin token存储成功");
								  console.log(this.$store.state.token)
								  
								  this.$store.commit("saveLocalid",res[1].data.data.id)
								  console.log("admin id存储成功");
								  console.log(this.$store.state.id)
								  
								  
								  console.log("admin 登录成功");
								  this.isLogining = true
								  setTimeout(()=>{
								  	this.isLogining = false
									uni.showModal({
													title: "提示",
													content: "管理员登录成功",
													showCancel:false,
													success: function (res) {
														if (res.confirm) {
															console.log('用户点击确定');
														} else if (res.cancel) {
															console.log('用户点击取消');
														}
													}
												});
								  },2000)
							  }
							  else{
								  console.log("管理员登录失败");
								  this.isLogining = true
								  setTimeout(()=>{
								  	this.isLogining = false
									uni.showModal({
													title: "提示",
													content: "管理员登录失败："+res[1].data.message,
													showCancel:false,
													success: function (res) {
														if (res.confirm) {
															console.log('用户点击确定');
														} else if (res.cancel) {
															console.log('用户点击取消');
														}
													}
												});
								  },2000)
							  }
						  })
						  //获取个人id
				uni.request({
					  	method:'GET',
						url:"http://47.97.114.13:8080/api/user/my",
						header: {
						    "Authorization": this.$store.state.token,
						  },
					  })					  
					  .then(res => {
						  console.log(res);
						  this.$store.commit("saveLocalid",res[1].data.data.id)
						  console.log("id:"+this.$store.state.id)
						  this.$store.commit("saveavatarUrl",res[1].data.data.avatarUrl)  
						  console.log("avatarUrl:"+this.$store.state.avatarUrl)
					  })
					  
					if(this.$store.state.id!=null)
					{
						console.log("跳转");
						uni.switchTab({
							url: 'pages/tabbar/tabbar-5/tabbar-5'
						});
					}
			},
			
			loginCommon() {
				
				//用户登录
				uni.request({
					  	method:'POST',
						url:"http://47.97.114.13:8080/api/user/token",
						data:{
							username:this.userLoginInfo.userName,
							password:this.userLoginInfo.password,
						},
					  })
					  .then(res => {
						  console.log("login");
						  console.log(res);
						  if(res[1].data.success === true)
						  {
							  this.$store.commit("saveToken",res[1].data.data.token)
							  console.log("token存储成功");
							  console.log(this.$store.state.token)
							  
							  this.$store.commit("saveLocalid",res[1].data.data.id)
							  console.log("admin id存储成功");
							  console.log(this.$store.state.id)
							  
							  console.log("登录成功");
							  this.isLogining = true
							  setTimeout(()=>{
							  	this.isLogining = false
								uni.showModal({
												title: "提示",
												content: "登录成功",
												showCancel:false,
												success: function (res) {
													if (res.confirm) {
														console.log('用户点击确定');
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
							  },2000)
						  }
						  else{
							  console.log("登录失败");
							  this.isLogining = true
							  setTimeout(()=>{
							  	this.isLogining = false
								uni.showModal({
												title: "提示",
												content: "登录失败："+res[1].data.message,
												showCancel:false,
												success: function (res) {
													if (res.confirm) {
														console.log('用户点击确定');
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
							  },2000)
						  }
					  })
					  //获取个人id
			uni.request({
				  	method:'GET',
					url:"http://47.97.114.13:8080/api/user/my",
					header: {
					    "Authorization": this.$store.state.token,
					  },
				  })					  
				  .then(res => {
					  console.log(res);
					  this.$store.commit("saveLocalid",res[1].data.data.id)
					  console.log("id:"+this.$store.state.id)
					  this.$store.commit("saveavatarUrl",res[1].data.data.avatarUrl)  
					  console.log("avatarUrl:"+this.$store.state.avatarUrl)
				  })
				  
				if(this.$store.state.id!=null)
				{
					console.log("跳转");
					uni.switchTab({
						url: 'pages/tabbar/tabbar-5/tabbar-5'
					});
				}

			},
			//用户注册
			register(){
				console.log("register")
				uni.request({
					  	url:'http://47.97.114.13:8080/api/user',
						method:"POST",
						data:{
							username:this.userLoginInfo.userName,
							password:this.userLoginInfo.password,
						},
					  })
					  .then(res => {
						  
						  console.log(res);
						  if(res[1].data.success === true)
						  {
							  console.log("success")
							  this.isLogining = true
							  setTimeout(()=>{
							  	this.isLogining = false
							  	// this.$refs.uToast.show({
							  	// 	title: '注册成功',
							  	// 	type: 'success'
							  	// })
								uni.showModal({
												title: "提示",
												content: "注册成功",
												showCancel:false,
												success: function (res) {
													if (res.confirm) {
														console.log('用户点击确定');
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
							  },2000)

						  }
						  else{
							  console.log("fail")
							  this.isLogining = true
							  setTimeout(()=>{
							  	this.isLogining = false
							  	// this.$refs.uToast.show({
							  	// 	title: '注册失败',
							  	// 	type: 'error'
							  	// })
								uni.showModal({
												title: "提示",
												content: "注册失败："+res[1].data.message,
												showCancel:false,
												success: function (res) {
													if (res.confirm) {
														console.log('用户点击确定');
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
							  },2000)
						  }						  
					  })
			}
		},
		watch: {
			userLoginInfo: {
				handler(newVal, oldVal) {
					if ((newVal.userName !== '') && (newVal.password !== '')) {
						this.isDisabledBtn = false
					} else {
						this.isDisabledBtn = true
					}
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	$screen-height:1334rpx;

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		width: 100%;


		.input-area {
			width: 80%;

			.user-icon {
				width: 100%;
				display: flex;
				justify-content: center;

				>image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.input-text {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-top: 20rpx;

				.clear {
					height: 100rpx;
					display: flex;
					align-items: center;

					.img {
						height: 36rpx;
						width: 36rpx;
					}
				}
			}

			.btn {
				margin-top: 40rpx;

				.login-btn {
					width: 100%;
					border-radius: 20rpx;
					border: $uni-color-primary;
					background-color: $uni-color-primary;
					color: $uni-text-color-inverse;
				}
			}
		}

		.copy-right {
			// bottom: 100rpx;
			bottom: 0;
			width: 100%;
			color: $uni-text-color-grey;
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>

